<!DOCTYPE html>
<html>
<head>
	<title>computed practice</title>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>	
	<style type="text/css">
		.base {
		  width: 200px;
		  height: 200px;
		}
		.active {
		  background: green;
		  color: #607d8b;
		}
		.text-danger {
		  background: #71d4e0;
		  color: #607d8b
		}	
	</style>		
</head>
<body>
<div id='computed-test-1' >
		<h3>computed simple application:</h3>
		{{showMes}}</br>
		<h3>computed vs methods</h3>
		我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。</p>
		而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
		<h3>this div will show the different between computed and method:</h3>
		【computed】call showCount first times {{showCount}}</br>
		【computed】call showCount second times {{showCount}}</br>
		【method】call showCount2 first times {{showCount2()}}</br>
		【method】call showCount2 second times {{showCount2()}}</br>
</div>
</br>

<div id='computed-bind-class' v-bind:class = 'classObject'>
	我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式	
</div>

<script type="text/javascript">

	var cout = 0;

	var computed_test = new Vue({
		el:'#computed-test-1',
		data:{
			show:"Let's learn vue together！"
		},
		computed:{
			showMes:function(){
				return this.show.split('').reverse().join('');
				},
			showCount:function(){
				cout += 1;
				return "Now the value of cout's  " + cout;
			}

			},
		methods:{
				showCount2:function(){
				cout += 1;
				return "Now the value of cout's  " + cout;
			}
		}

		});

		var computed_bind_class = new Vue({
			el:'#computed-bind-class',
			data:{
				isActive:true,
				error:{
					value:true,
					type:'fatal'
				}

			},
			computed:{
				classObject:function(){
					return {
						base:true,
						active:this.isActive && ! this.error.value,
						'text-danger':this.error.value && this.error.type === 'fatal'
					}
				}
			}


		});


</script>



</body>
</html>